---
# title: "Transform Origin"
title: "变换原点"
# description: "Utilities for specifying the origin for an element's transformations."
description: "用于指定元素变换源点的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/transformOrigin'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage

Specify an element's transform origin using the `origin-{keyword}` utilities. -->
## 用途

使用 `origin-{keyword}` 功能指定元素的变换源点。

```html indigo
<template preview>
  <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
    <div class="w-16 h-16 bg-indigo-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 origin-center transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-indigo-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 origin-top-left transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-indigo-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 origin-bottom-right transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-indigo-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 origin-left transform rotate-45" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
  </div>
</template>

<img class="**origin-center** transform rotate-45 ...">
<img class="**origin-top-left** transform rotate-45 ...">
<img class="**origin-bottom-right** transform rotate-45 ...">
<img class="**origin-left** transform rotate-45 ...">
```

<!-- ## Responsive -->
## 响应式

<!-- To control the transform-origin of an element at a specific breakpoint, add a `{screen}:` prefix to any existing transform-origin utility. For example, use `md:origin-top` to apply the `origin-top` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的变换原点，请在任何现有的变换原点功能中添加 `{screen}:` 前缀。例如，使用 `md:origin-top` 来应用 `origin-top` 功能在中等尺寸以上的屏幕上。

```html
<img class="origin-center **md:origin-top** ...">
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

### Origin values

<!-- By default Tailwind provides transform-origin utilities for all of the built-in browser keyword options. You change, add, or remove these by customizing the `transformOrigin` section of your Tailwind theme config. -->

默认情况下，Tailwind 为所有内置的浏览器关键字选项提供了变换源点的功能。您可以通过定制您的 Tailwind 主题配置的 `transformOrigin` 部分来改变，添加或删除这些。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transformOrigin: {
+         '24': '6rem',
+         'full': '100%',
        }
      }
    }
  }
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于定制默认主题的信息。

<!-- ### Variants -->
### 变体

<Variants plugin="transformOrigin" name="transform-origin" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="transformOrigin" name="transform-origin" />
